<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站建设</title>
    <include file="./themes/default/portal/cssH.html"/>

    <style>
        .desc {
            padding: 0 15px;
            height: 80px;
            overflow: hidden;
        }

        .banner {
            display: block;
            width: 100%;
            height: auto;
        }

        .buttom {
            height: 40px;
            line-height: 40px;
            width: 190px;
            color: #fff;
            border-radius: 20px;
            background: #6884E3;
            margin-top: 47px;
            margin-bottom: 47px;
        }

        .leftP {
            right: 0;
            top: 0;
        }

        .c9 {
            color: #999;
        }

        .c3 {
            color: #333;
        }

        .c6 {
            color: #666;
        }

        .borderLeft {
            height: 4px;
            width: 30px;
            background: #6884E3;
            border-radius: 4px;
            margin-top: 8px;
            margin-bottom: 31px;
        }

        .cl {
            line-height: 50px;
            margin-left: 10px;
        }

        .title {
            padding-top: 10px;
            padding-bottom: 32px;
        }

        .make {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: transparent;
            background-color: transparent;
        }

        .make_bottom {
            width: 93px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
        }

        @media screen and (min-width: 950px) {
            .f1n {
                font-size: 18px;
            }

            .box > div {
                width: 33.333%;
                display: inline-block;
                margin-top: 40px;
            }

            .make:hover .make_bottom {
                border: 1px solid #fff;
            }

            .make:hover {
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
            }

            .list {
                display: flex;
            }

            .list > div {
                height: 50px;
                line-height: 50px;
                display: flex;
            }

            .list > div:nth-child(2) {
                margin-left: 75px;
                margin-right: 75px;
            }

            .case > div {
                width: 31.33%;
                margin-bottom: 24px;
                display: inline-block;
            }

            .case > div:nth-child(3n-1) {
                margin-left: 24px;
                margin-right: 24px;
            }
        }

        @media screen and (max-width: 950px) {
            .case > div {
                width: 45%;
                margin-bottom: 24px;
                display: inline-block;
            }

            .case > div:nth-child(2n) {
                margin-left: 24px;
            }

            .f1n {
                font-size: 14px;
            }

            .box > div {
                width: 100%;
                display: inline-block;
                margin-top: 40px;
            }

            .list > div {
                height: 50px;
                line-height: 50px;
            }
        }

        .box {
            width: 70%;
        }

        .imgli {
            width: 64px;
            height: auto;
        }

        .img {
            width: 108px;
            height: auto;
        }

        .case > div img {
            width: 100%;
            height: auto;
        }

        .list > div {
            box-sizing: border-box;
            padding: 0 30px;
            border-bottom: 1px solid #ccc;
            display: flex;
            margin-bottom: 25px;
        }

        .list input {
            width: 100%;
            border: none;
        }

        .list img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .borderLeft {
            height: 4px;
            width: 30px;
            background: #6884E3;
            border-radius: 4px;
            margin-top: 8px;
            margin-bottom: 31px;
        }

        .bottom {
            width: 110px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-image: url("/static/demo/img/b0.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .msg {
            color: #f00;
            font-size: 14px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .imgLi {
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        .navs {
            margin-top: 20px;
            margin-bottom: 70px;
        }

        .border {
            height: 1px;
            background: #ccc;
            width: 100%;
            margin-top: 10px;
        }

        .border > div {
            top: 0;
            right: 0;
            height: 1px;
            width: 150px;
            background: #6884E3;
        }

    </style>
</head>
<body>
<div id="web">
    <include file="./themes/default/portal/phone.html"/>

    <div id="app">
        <include file="./themes/default/portal/header.html"/>


        <!--  内容  -->
        <div>
            <img class="banner" src="/static/demo/img/cover.png" alt="">

            <!--  面包屑  -->
            <div class="navs">
                <div>
                    <div class="flex">
                        <!--    从哪些页进来的    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d1.png" alt="">
                                <div class="f1n" @click="navigatorFun(0)">首页&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;
                                </div>
                            </div>
                        </div>
                        <!--   在当前页的标题    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d2.png" alt="">
                                <div class="f1n">网站建设</div>
                            </div>
                        </div>
                    </div>
                    <!--   下边框   -->
                    <div class="border pr">
                        <div class="pa"></div>
                    </div>
                </div>
            </div>

            <div class="flex  wow bounceInDown">
                <div style="margin-left: 33px" class="flex-sub pr">
                    <div>
                        <div class="f28 pr flex" style="z-index: 10">为您提供最专业的网站建设方案</div>
                        <div class="borderLeft pr" style="z-index: 10"></div>
                    </div>
                    <div class="c6 f16 pr" style="z-index: 10">
                        {{detail.desc}}
                    </div>
                    <div>
                        <div class="buttom tc f14 pr" style="z-index: 10">立即获取方案和报价</div>
                    </div>
                    <img class="pa leftP" height="260px" src="/static/demo/img/bg0.png" alt="">
                </div>
                <div><img class="pr" style="z-index: 10" height="260px" :src="detail.image" alt=""></div>
            </div>

            <div>
                <div class="tc f28">高端定制</div>
                <div style="height: 14px"></div>
                <div class="tc f20 c9">专业技术开发，专注产品体验</div>
            </div>

            <div class="flex flex-align flex-center">
                <div class="box">
                    <div :key="index" v-for="(item,index) in list" class="wow zoomIn">
                        <div class="flex flex-align flex-center"><img class="img" :src="item.img" alt=""></div>
                        <div class="tc f20 c6">{{item.title}}</div>
                        <div class="flex flex-align flex-center"><img class="imgli" src="./img/bg1.png" alt=""></div>
                        <div class="tc f14 c9 desc">{{item.desc}}</div>
                    </div>
                </div>
            </div>
            <div style="height: 32px"></div>

            <!-- 相关案例   -->
            <div class="wow bounceInRight">
                <div>
                    <div class="tc f28">
                        相关案例
                        <div class="flex flex-align">
                            <div class="borderLeft" style="margin-bottom: 10px"></div>
                        </div>
                    </div>
                </div>
                <div style="height: 32px"></div>

                <div class="case flex">
                    <div class="flex-sub pr" :key="index" v-for="(item, index) in imgs">
                        <img :src="item.image" alt="">
                        <div class="pa make flex flex-align flex-center">
                            <div>
                                <div class="f20 tc">天津四辈大福来</div>
                                <div class="f16 tc title">官方网站建设</div>
                                <div class="flex flex-align" @click="goPage(5,item)">
                                    <div class="make_bottom tc f14">查看项目</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 32px"></div>
            <!--  联系  -->
            <div class="wow bounceInLeft">
                <div>
                    <div>
                        <div class="tc f28">
                            联系我们
                            <div class="flex flex-align">
                                <div class="borderLeft" style="margin-bottom: 10px"></div>
                            </div>
                        </div>
                        <div style="height: 32px"></div>
                        <div class="list">
                            <div class="flex-sub flex-align"><img src="__STATIC__/demo/img/mys.png" alt=""><input
                                    class="f14" type="text" v-model="name" placeholder="请输入您的姓名"/></div>
                            <div class="flex-sub flex-align"><img src="__STATIC__/demo/img/tels.png" alt=""><input
                                    class="f14" type="text" v-model="phone" placeholder="请输入手机号/邮箱"/></div>
                            <div class="flex-sub flex-align"><img src="__STATIC__/demo/img/an.png" alt=""><input
                                    class="f14" type="text" v-model="code" placeholder="验证码">
                                <canvas id="canvas" style="height: 35px;width: 90px;border: 1px solid #ccc;"></canvas>
                            </div>
                        </div>
                        <div style="height: 32px" v-show="!msg"></div>
                        <div class="msg" v-show="msg">{{msg}}</div>

                        <div class="flex flex-center flex-align">
                            <div class="tc f14 bottom" @click="contact()">立即联系</div>
                        </div>
                    </div>

                </div>
            </div>
            <div style="height: 60px"></div>
        </div>
    </div>
    <!--  尾  -->
    <include file="./themes/default/portal/footer.html"/>
    <input type="hidden" name="caseList" value='{$json}' id="caseList">
    <script>
        var app = new Vue({
            el: '#web',
            data: {
                show: false,
                navIndex: 0,
                navList: [
                    {title: '网站首页', name: 'main', nav: []}, {title: '看见梧桐树', name: 'see', nav: []}, {
                        title: '看清梧桐树',
                        name: 'clearly',
                        nav: []
                    }, {title: '看懂梧桐树', name: 'caseList', nav: []}, {title: '凤栖梧桐', name: 'contact', nav: []}
                ],
                navLists: [
                    {title: '网站首页', name: 'main', nav: []},
                    {title: '看见梧桐树', name: 'see', nav: ['企业简介', '关于我们']},
                    {title: '看清梧桐树', name: 'clearly', nav: ['新闻资讯']},
                    {title: '看懂梧桐树', name: 'caseList', nav: ['小程序开发', '公众号开发', 'APP开发', '品牌网站']},
                    {title: '凤栖梧桐', name: 'contact', nav: ['品牌网站']}],

                // 手机端导航列表
                navList1: [
                    {
                        img: '/static/demo/img/nav7.png',
                        title: '小程序开发',
                        name: 'program'
                    },
                    {
                        img: '/static/demo/img/nav4.png',
                        title: 'APP开发',
                        name: 'development'
                    },
                    {
                        img: '/static/demo/img/nav6.png',
                        title: '公众号开发',
                        name: 'publicNumber'
                    },
                    {
                        img: '/static/demo/img/nav5.png',
                        title: 'PC/WAP建站',
                        name: 'build'
                    }
                ],
                list: [
                    {
                        title: '官网建设',
                        img: '/static/demo/img/nav8.png',
                        desc: '突出企业核心特点 全面展示企业优势'
                    },
                    {
                        title: '品牌网站建设',
                        img: '/static/demo/img/nav9.png',
                        desc: '颠覆视觉创新 塑造优秀品牌'
                    },
                    {
                        title: '电商网站建设',
                        img: '/static/demo/img/nav10.png',
                        desc: '电子商务大时代 汇聚盈利新平台'
                    },
                    {
                        title: '营销型网站建设',
                        img: '/static/demo/img/nav11.png',
                        desc: '借力营销技巧 获取网站效益'
                    },
                    {
                        title: '行业门户网站建设',
                        img: '/static/demo/img/nav12.png',
                        desc: '一站式综合行业资源'
                    },
                    {
                        title: '响应式网站建设',
                        img: '/static/demo/img/nav13.png',
                        desc: '优雅适应多种终端 随时展现完美布局'
                    }
                ],
                detail: {
                    image: '/static/demo/img/see2.png',
                    desc: '梧桐树针对不同的网站类型提供合适企业的设计方案，通过网站目标定位，针对性选择布局，重点展示了客户所关心的内容；并以简洁明朗的设计风格，清晰展现公司水平实力，确保一秒抓住目标用户眼球，给用户留下良好的第一印象。'
                },

                imgs: [],
                msg: '',
                name: '',
                text: '',
                phone: '',
                code: ''
            },
            mounted: function () {

            },
            created: function () {
                var caseList = document.getElementById('caseList').value;
                var caseLists = JSON.parse(caseList);
                this.imgs = caseLists;
            },
            methods: {
                goPage: function (index, item) {
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/program')}?cate_id=3"
                            break
                        case 1:
                            window.location.href = "{:url('index/development')}?cate_id=6"
                            break
                        case 2:
                            window.location.href = "{:url('index/publicNumber')}?cate_id=5"
                            break
                        case 3:
                            window.location.href = "{:url('index/build')}?cate_id=7"
                            break
                        case 5:
                            if (item.url) {
                                console.log(item)
                                window.location.href = item.url
                                return
                            }
                            window.location.href = "{:url('index/caseDetail')}?id=" + item.id + "&name=" + item.title
                            break
                        case 6:
                            window.location.href = "{:url('index/detail')}?id=" + item.id + "&name=" + item.title
                            break
                    }
                },
//      导航的跳转
                navigatorFun: function (index) {
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/index')}"
                            break
                        case 1:
                            window.location.href = "{:url('index/see')}"
                            break
                        case 2:
                            window.location.href = "{:url('index/clearly')}"
                            break
                        case 3:
                            window.location.href = "{:url('index/caseList')}"
                            break
                        case 4:
                            window.location.href = "{:url('index/contact')}"
                            break
                    }
                },
                contact: function () {
                    var _this = this
                    var reg = /^1[5||4||3||6|7||8||9][0-9]{9}$/
                    var ref = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                    if (!_this.name || _this.name.length > 30) {
                        _this.msg = '请确认您的姓名是否填写（或长度超出30个字符）！'
                        return false;

                    }
                    if (!reg.test(_this.phone) && !ref.test(_this.phone)) {
                        _this.msg = '请确认您的邮箱（或手机号）是否填写（或填写的是否正确）！'
                        return false;

                    }
                    if (!_this.code) {
                        _this.msg = '请填写验证码！'
                        return false;
                    }

                    var codes = _this.code.toLowerCase()
                    var texts = _this.text.toLowerCase()
                    if (codes != texts) {
                        _this.msg = '验证码有误！'
                        var can = document.getElementById('canvas')
                        draw([], can, function (txt) {
                            for (item of txt) {
                                app.text += item
                                console.log(app.text)
                            }
                        })
                        return false;
                    }
                    $.post("{:url('Index/postContact')}", {
                        user_name: _this.name,
                        str: _this.phone,
                    }, function (data) {
                        var res = JSON.parse(data);
                        if (res.code == 1) {
                            layer.msg('留言成功', function () {
                                window.location.href = "{:url('Index/index')}";
                            });
                        } else {
                            layer.msg('网络错误');
                        }
                    })
                }
            }
        })
        window.onload = function () {
            var can = document.getElementById('canvas')
            draw([], can, function (txt) {
                for (item of txt) {
                    app.text += item
                    console.log(app.text)
                }
            })
            can.onclick = function () {
                draw([], can, function (txt) {
                    for (item of txt) {
                        app.text += item
                        console.log(app.text)
                    }
                })
            }
        }
    </script>
</html>